<template>
  <div id="app">
    <!-- <router-view /> -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

<script>
import animationPolyfill from '@/utils/animationPolyfill.js';

import { mapMutations } from 'vuex';
export default {
  name: 'app',
  watch: {
    $route() {
      // 切换路由headerTitle不更新问题
      this.headerTitle = '';
      if (this.$isIE9) {
        this.IENine();
      }
    },
  },
  created() {
    // 获取vuex
    if (window.sessionStorage.getItem('vxadmin')) {
      this.$store.state.vxadmin = this.strToJson(window.sessionStorage.getItem('vxadmin'));
      window.sessionStorage.removeItem('vxadmin');
    }
  },

  mounted() {
    // 监听浏览器刷新
    window.addEventListener('beforeunload', (e) => this.beforeunloadHandler(e));
  },
  methods: {
    ...mapMutations({
      clearGray: 'vxadmin/gray/set',
    }),
    IENine() {
      animationPolyfill();
    },
    // eslint-disable-next-line no-unused-vars
    beforeunloadHandler(e) {
      e = e || window.event;
      this.clearGray(false);
      window.sessionStorage.setItem('vxadmin', JSON.stringify(this.$store.state.vxadmin));
    },
  },
};
</script>
